<template>
  <video
    id="player-container-id"
    width="800"
    height="500"
    preload="auto"
    playsinline
    webkit-playsinline
  ></video>
</template>

<script lang="js">
import TCPlayer from 'tcplayer.js';

export default {
  props: {
    fileID: {
      type: [String, Number],
      required: true,
    },
    appID: {
      type: [String, Number],
      required: true,
    },
    psign: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      Player: null,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.Player.dispose();
  },
  methods: {
    init() {
      this.Player = TCPlayer('player-container-id', {
        // player-container-id 为播放器容器 ID，必须与 html 中一致
        fileID: this.fileID, // 请传入需要播放的视频 fileID（必须）
        appID: this.appID, // 请传入点播账号的 appID（必须）
        //私有加密播放需填写 psign， psign 即播放器签名，签名介绍和生成方式参见链接：https://cloud.tencent.com/document/product/266/42436
        psign: this.psign,
        autoplay: true,
        licenseUrl: process.env.VUE_APP_VIDEO_LICENSE_URL,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~tcplayer.js/dist/tcplayer.min.css';
</style>
